<template>
	<view class="tab-block">
		<view class="tab-list">
			<view 
				v-for="(item, index) in tabList" 
				:key="index"
				class="list-item"
				@click="handlePush(item, index)"
			>
				<view class="item-img-box">
					<image 
						class="item-img" 
						:src="tabIndex == index ? item.selectedIconPath : item.iconPath" 
						:style="{ transform: tabIndex == index ? 'scale(1.1)' : 'scale(1)' }"
					/>
				</view>
				<view 
					class="item-text" 
					:class="{ 'specialColor': tabIndex == index }"
				>
					{{item.text}}
				</view>
			</view>
		</view>
		<view class="tab-bar" v-if="showTabBar"></view>
	</view>
</template>

<script>
	export default {
		props: {
			tabIndex: { //当前选中的tab项
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				/*
				 * iconPath: 默认icon图片路径
				 * selectedIconPath: 选中icon图片路径 
				 * text: tab按钮文字
				 * pagePath:页面路径
				 * middleClass:该按钮所有的特殊样式类名
				 * tabList最小两项，最多五项
				 * tabList长度为奇数时，中间按钮才会突出显示
				 * 
				 */
				tabList: [{
						"pagePath": "/pages/index/index",
						"iconPath": "/static/icon/home.png",
						"selectedIconPath": "/static/icon/home-active.png",
						"text": "首页"
					}, {
						"pagePath": "/pages/explore/explore",
						"iconPath": "/static/icon/find.png",
						"selectedIconPath": "/static/icon/find-active.png",
						"text": "论坛"
					}, {
						"pagePath": "/pages/my/my",
						"iconPath": "/static/icon/my.png",
						"selectedIconPath": "/static/icon/my-active.png",
						"text": "我的"
					}
				],
				showTabBar: false,
				showMiddleButton: false,
			};
		},
		computed: {
			getHeight() {
				return Number(this.height);
			},
		},
		mounted() {
			this.getSystemInfo()
			this.setTabBar()
		},
		methods: {
			//判断中间按钮是否突出显示，奇数or偶数，奇数突出
			setTabBar() {
				let tabLength = this.tabList.length
				if (tabLength % 2) {
					// debugger
					this.showMiddleButton = true
					// 向上取整
					let middleIndex = Math.floor(tabLength / 2)
					// 给中间的添加mid-button
					this.tabList[middleIndex].middleClass = 'mid-button'
				}
			},

			//点击按钮
			handlePush(item, index) {
				if (this.tabIndex !== index) {
					uni.switchTab({
						url: item.pagePath
					})
				}
			},

			//兼容iPhoneX以上底部黑线条的显示
			getSystemInfo() {
				//获取系统信息
				uni.getSystemInfo({
					success: (res) => {
						// X及以上的异形屏top为44，非异形屏为20
						if (res.safeArea.top > 20) {
							this.showTabBar = true
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.specialColor {
		color: #ff69b4 !important;
	}

	.tab-block {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		width: 100%;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		
		.tab-list {
			height: 120rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding-bottom: env(safe-area-inset-bottom);
		}

		.list-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 10rpx 0;
			position: relative;

			.item-img-box {
				width: 56rpx;
				height: 56rpx;
				margin-bottom: 6rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				
				.item-img {
					width: 48rpx;
					height: 48rpx;
					transition: all 0.3s;
				}
			}

			.item-text {
				font-size: 24rpx;
				color: #666;
				transition: all 0.3s;
			}

			&:active {
				opacity: 0.7;
			}
		}

		.tab-bar {
			height: constant(safe-area-inset-bottom);
			height: env(safe-area-inset-bottom);
			background-color: #fff;
		}
	}
</style>